<script setup>
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();

let screen = ref();
onMounted(() => {
  screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`;
});
const getScale = (width = 1920, height = 1080) => {
  let ww = window.innerWidth / width;
  let wh = window.innerHeight / height;
  return ww < wh ? ww : wh;
};
// 监听容器大小
window.onresize = () => {
  screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`;
};

function handleGoHxs() {
  router.push("/index");
}

function handleGoYjt() {
  const path = window.location.origin;
  if (path.includes("23.")) {
    location.href = `http://23.210.23.1:8081/yjt/#/login`;
  } else {
    location.href = `https://szjy.cqedu.cn:8081/yjt#/login`;
  }
}
</script>

<template>
  <div class="entry">
    <div class="screen" ref="screen">
      <div class="header">
        <span class="header-t">社会·渝悦·惠学生</span>
      </div>
      <div class="main">
        <img
          src="../../assets/images/hxsEntry.png"
          class="main-c"
          @click="handleGoHxs"
        />
        <img
          src="../../assets/images/yjtEntry.png"
          class="main-c"
          @click="handleGoYjt"
        />
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.entry {
  width: 100vw;
  height: 100vh;
  background: url("../../assets/images/entryBg.jpg") no-repeat;
  background-size: 100% 100%;
  background-position: center;

  .screen {
    position: fixed;
    width: 1920px;
    height: 1080px;
    left: 50%;
    top: 50%;
    transform-origin: left top;
    display: flex;
    flex-direction: column;
    align-items: center;
    .header {
      display: flex;
      justify-content: center;
      width: 1500px;
      height: 100px;
      background: url(../../assets/images/entryHeader.png) no-repeat;
      background-size: 100% 100%;
      .header-t {
        font-weight: bold;
        font-size: 40px;
        line-height: 80px;
        letter-spacing: 2px;
        text-align: center;
        background-image: linear-gradient(#ffffff 0%, #c3d4f6 100%);
        background-clip: text;
        color: transparent;
      }
    }
    .main {
      width: 100%;
      flex: 1;
      display: flex;
      justify-content: center;
      //   align-items: center;
      gap: 210px;
      .main-c {
        margin-top: 208px;
        width: 324px;
        height: 383px;
        cursor: pointer;
      }
    }
  }
}
</style>
